<template>
  <breadcrumb></breadcrumb>
  <div class="order-page">
    <el-table stripe :data="tableData" border style="width: 100%; height: 100%">
      <el-table-column type="expand" label="明细" width="60">
        <template #default="props" slot-scope="scope">
          <el-table
            stripe
            border
            :data="props.row.detail"
            style="width: 1580px; margin-left: 20px"
          >
            <el-table-column label="封面" prop="" width="180" >
              <img src='' alt="">
            </el-table-column>
            <el-table-column label="商品" prop="Name" width="800" />
            <el-table-column label="商品重量" prop="goods_weight" width="150" />
            <el-table-column label="商品数量" prop="goods_number" width="150" />
            <el-table-column
              label="商品价格(元)"
              prop="goods_price"
              width="150"
            />
            <el-table-column
              label="总价(元)"
              prop="goods_total_price"
              width="150"
            />
          </el-table>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="55"> </el-table-column>
      <el-table-column label="订单编号" prop="order_number" />
      <el-table-column label="订单价格(元)" prop="order_price" />
      <el-table-column label="是否付款" prop="pay_status">
        <el-tag type="danger" effect="dark"> 未付款 </el-tag>
      </el-table-column>
      <el-table-column label="是否发货" prop="is_send"> </el-table-column>
      <el-table-column label="下单时间" prop="create_time" />
      <el-table-column label="操作" prop="">
        <el-button type="primary" icon="Edit" size="small" />
        <el-button type="warning" icon="Location" size="small" />
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="currentchange"
      v-model:current-page="current"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,15]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goods"
    />
    
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { getOrderList, getOrderInfo } from "../../apis/order-list";
import { shijianc } from "@/utils/order.js";
let goods = ref(1);
let tableData = ref([]);
let lasttabledata = ref([]);
let pageSize=ref(10)
let current = ref(1);
function getGoodLIst(pageSize,page) {
  // console.log(page.value)

  getOrderList({ pagesize: pageSize, pagenum: page }).then(({ data }) => {
    console.log(data);
    goods.value = data.total;
    tableData.value = data.goods;
    
    tableData.value.forEach((item) => {
      getOrderInfo(item.order_id).then((data) => {
        console.log(data.detail)
        // document.write(data.data.goods)
        item.detail = data.data.goods;
      });
      // console.log(item.create_time)
      let a = shijianc(item.create_time * 1000);
      item.create_time = a;
    });
    console.log(tableData.value);
  });
}
watch(pageSize,(val)=>{
  console.log(val)
  getGoodLIst(pageSize.value,current)
})
function currentchange() {
  // console.log(current.value)
  getGoodLIst(current.value);
}
// watch(current,()=>{
//   getGoodLIst()
// })
getGoodLIst(pageSize.value,current.value);
function ShowOrder(props) {
  console.log(props);
  //   console.log(order_id)

  return a;
}
</script>

<style scoped lang="scss">
.el-pagination {
  float: right;
}
</style>
